<template>
  <Hand left="true" @back="router.back()" title="分类" :iconbool="false">
    <p v-show="icon">
      <van-icon class="icon" @click="goCar" name="cart" color="white" />
    </p>
  </Hand>

  <div class="box">
    <div class="left">
      <van-sidebar v-model="active" class="leftBox">
        <van-sidebar-item v-for="item in titleArr" :title="item.title" class="leftItem" @click="Left(item.title)" />
      </van-sidebar>
    </div>

    <Type v-if="right">
      <template #right>
        <ul v-for="item in List.value" :key="item">
          <li class="Li">
            <span>{{ item.name }}</span>
            <br />
            <span v-for="index in item.content" :key="index">
              <p class="Span">{{ index }}</p>
            </span>
          </li>
        </ul>
      </template>
    </Type>
    <div>
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import Hand from "../../components/Hand.vue";

// 导入分类 公共组件
import Type from "../../components/Type.vue";
// 导入 json 文件
import { data } from "../../components/TypeList.json";
// 导入 pinia
import { useRouter } from "vue-router";
const router = useRouter();
const List = reactive({});
const active = ref(0);
const name = ref("可回收物");

defineProps({
  icon: {
    type: Boolean,
    default: false
  },
  titleArr: {
    type: Array,
    default: [
      {
        id: 1,
        title: "可回收物"
      },
      {
        id: 2,
        title: "湿垃圾"
      },
      {
        id: 3,
        title: "干垃圾"
      },
      {
        id: 4,
        title: "有害垃圾"
      }
    ]
  },
  right: {
    default: true
  },
  rightArr: {
    type: Array
  }
});

function goCar() {
  // router.push("/Car")
  router.push({
    path: "/Empty",
    query: {
      TextTitle: "购物车"
    }
  });
}



if (name.value == "可回收物") {
  List.value = data.Recyclable.list;

} else if (name.value == "湿垃圾") {
  List.value = data.WetGarbage.list;
} else if (name.value == "干垃圾") {
  List.value = data.DryGarbage.list;
} else if (name.value == "有害垃圾") {
  List.value = data.HarmfulWaste.list;
}

// 点击左边的内容
const Left = title => {
  name.value = title;

  if (name.value == "可回收物") {
    List.value = data.Recyclable.list;
  } else if (name.value == "湿垃圾") {
    List.value = data.WetGarbage.list;
  } else if (name.value == "干垃圾") {
    List.value = data.DryGarbage.list;
  } else if (name.value == "有害垃圾") {
    List.value = data.HarmfulWaste.list;
  }

};

</script>

<style lang="less" scoped>
.icon {
  font-size: 6.667vw;
}

.box {
  width: 100vw;
  height: 100vh;
  display: flex;

  .left {
    width: 26.667vw;
    background: #fff;

    .leftBox {
      width: 100%;

      .leftItem {
        background: #fff;
      }

      .leftItem::before {
        height: 80%;
        background-color: #ff5e81;
        border-radius: 3px;
        color: #ff5e81;
        font-weight: 200;
      }

      .leftItem:hover {
        color: #ff5e81;
      }
    }
  }
}

.Li {
  border-radius: 2.667vw;
  padding: 2.667vw;
  background-color: #ffff;
  margin-bottom: 2.667vw;

  span:nth-of-type(1) {
    display: inline-block;
    font-size: 4vw;
    font-weight: 800;
    padding-left: 2.667vw;
    border-left: 0.667vw solid red;
    margin-bottom: 2.667vw;
  }

  .Span {
    padding-left: 3.333vw;
    margin-bottom: 5.667vw;
    font-family: "微软雅黑";
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    text-align: left;
  }
}
</style>
